<template>
  <div>
    <el-table
      ref="dataTableRef"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      border
      @selection-change="handleSelectionChange"
      @sort-change="onTableSortChanged"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="100"
        show-overflow-tooltip
        sortable
      />
      <el-table-column
        label="变化点单号"
        prop="effectCheckCode"
        align="left"
        min-width="150"
        show-overflow-tooltip
        sortable
      >
        <template #default="scope">
          <span
            style="text-decoration: underline; cursor: pointer; color: #509ee7"
            @click="openDialogdetail(scope.row)"
            >{{ scope.row.effectCheckCode }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="变化点类型"
        prop="checkTypeName"
        min-width="150"
        show-overflow-tooltip
        align="center"
        sortable
      >
        <template #default="scope">
          <span>{{ scope.row.checkTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="变化点时间"
        prop="changePointTime"
        min-width="180"
        show-overflow-tooltip
        align="center"
        sortable
      />
      <el-table-column
        label="批次号"
        prop="batch"
        min-width="150"
        show-overflow-tooltip
        align="right"
        sortable
      />
      <el-table-column
        label="设备编号"
        prop="processName"
        min-width="150"
        show-overflow-tooltip
        align="left"
        sortable
      />
      <el-table-column
        label="工序"
        prop="processName"
        min-width="150"
        show-overflow-tooltip
        align="left"
        sortable
      />
      <!-- <el-table-column
        label="参数信息"
        prop="checkItemName"
        align="center"
        min-width="100"
        show-overflow-tooltip
        sortable
      >
        <template #default="scope">
          <span
            style="text-decoration: underline; cursor: pointer; color: #509ee7"
            @click="openDialogdetail(scope.row)"
            >详细</span
          >
        </template>
      </el-table-column> -->
    </el-table>

    <el-pagination
      :background="true"
      :current-page="pageable.pageNum"
      :page-size="pageable.pageSize"
      :page-sizes="[10, 25, 50, 100]"
      :total="pageable.total"
      layout="total, sizes, prev, pager, next, jumper"
      class="mt-[20px]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <toolingMoldEdit
    :visible="addDialog.visible"
    :title="addDialog.title"
    :data="addDialog.data"
    :is-readonly="addDialog.readvisible"
    @change-visible="changeVisible"
  />
</template>

<script setup lang="ts">
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";
import { filterOrder } from "@/utils/commonHooks";
defineOptions({
  name: "QMSRAWMATERIAL",
  inheritAttrs: false,
});
const props = defineProps({
  productBatch: {
    type: String,
    default: () => {
      return "";
    },
  },
});
// 请求参数
let requestApi = "/qms/directionTrace/queryChangePointByPage";

// 是否需要分页
const pagination = true;

const initParam = reactive({
  sort: {
    column: "",
    orderBy: "",
  },
});

// 初始化搜索参数数据
const searchParamInit = {
  productBatch: props.productBatch,
};

const deleteParam = {
  api: "/eam/eamCommonDoc/delete",
  data: {},
};

// 数据请求错误后处理
function requestError() {}

const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

const tableDatas = ref([
  {
    checkTypeName: "1111",
    batch: "生铁",
    effectCheckCode: "BHDYJD112201",
    checkItemName: "2024092132",

    effectPreCheckCode: "1200",

    checkResult: "1",
    checkTime: "2024-09-21 10:00:00",
    checkDuty: "1",
    checkUserName: "xiaoming",
    quantityUnit: "1",
  },
  {
    batch: "生铁",
    effectCheckCode: "BHDYJD112201",
    checkItemName: "2024092132",

    effectPreCheckCode: "1200",

    checkResult: "1",
    checkTime: "2024-09-21 10:00:00",
    checkDuty: "1",
    checkUserName: "xiaoming",
    quantityUnit: "1",
  },
  {
    batch: "生铁",
    effectCheckCode: "BHDYJD112201",
    checkItemName: "2024092132",

    effectPreCheckCode: "1200",
    quantityUnit: "1",

    checkResult: "1",
    checkTime: "2024-09-21 10:00:00",
    checkDuty: "1",
    checkUserName: "xiaoming",
  },
]);
// 排序
// 监听表格排序方法
function onTableSortChanged(column: any) {
  console.log(column);

  const { prop, order } = column;
  console.log(prop, order);

  initParam.sort = {
    column: prop,
    orderBy: filterOrder(order),
  };
}
// 监听页面 initParam 改化，重新获取表格数据
watch(() => initParam, getTableList, { deep: true });

const addDialog = reactive({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
  docType: "1",
});

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/eam/eamCommonDoc/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog.data = data.data;
      addDialog.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 打开资产型号表单弹窗 */
const assetTypeId = ref("");
function openDialog(roleObj?: Object) {
  if (roleObj) {
    addDialog.title = "修改工装模具";
    getInfo(roleObj.id);
  } else {
    assetTypeId.value = searchParam.value.assetTypeId;
    addDialog.title = "新增工装模具";
    addDialog.visible = true;
  }
  addDialog.readvisible = false;
}

/** 打开资产型号表单弹窗 详情 */
function openDialogdetail(roleObj?: any) {
  console.log(roleObj);

  addDialog.title = "工装模具详情";
  // getInfo(roleObj.id);
  addDialog.visible = true;
  addDialog.readvisible = true;
}

function changeVisible(value: boolean, docType: string) {
  addDialog.visible = value;
  addDialog.data = {};
}
watch(
  () => props.productBatch,
  (newVal: string) => {
    if (newVal) {
      searchParam.value.productBatch = newVal;
      search();
    } else {
      tableData.value = [];
    }
  }
);
onMounted(() => {
  if (props.productBatch) {
    searchParam.value.productBatch = props.productBatch;
    search();
  } else {
    tableData.value = [];
  }
});
</script>
<style scoped lang="scss">
@media only screen and (max-width: 768px) {
  .el-col-xs-24 {
    padding-right: 10px !important;
  }
}
</style>
